<template>
	<view class="bgcolor" v-if="pageShow">
		<header-top :messageInfo="{typeFlag:true,message:'银行卡信息'}">
		</header-top>
		<view class="backForm">
			<view class="conta">
				<view class="flexbetween padd20">
					<label style="width: 25%;"> 持卡人</label>
					<u--input placeholder="请输入持卡人名称" style='width: 60%;' type='text'
						placeholderStyle='paddingLeft:20rpx' v-model="bank_name">
					</u--input>
				</view>
				<view class="flexbetween padd20">
					<label class="white_nowrap" style="width: 25%;"> 银行卡号</label>
					<u--input placeholder="请输入银行卡号" style='width: 60%;' type='number'
						placeholderStyle='paddingLeft:20rpx' maxlength='19' v-model="bank_account">
					</u--input>
				</view>
				<view class="flexbetween padd20">
					<label style="width: 25%;"> 开户行</label>
					<u--input placeholder="请输入开户行" style='width: 60%;' type='text'
						placeholderStyle='paddingLeft:20rpx' v-model="open_bank">
					</u--input>
				</view>
			</view>
			<view style="padding: 30rpx 60rpx; width: 100%;box-sizing: border-box;">
				<view class="buttonStyle flexcenter" @click="confirmadd">确认</view>
			</view>
		</view>
	</view>
</template>

<script>
	const httpRequest = require("@/common/httpRequest.js")
	export default {
		data() {
			return {
				bank_name: "",
				bank_account: "",
				open_bank: "",
				pageShow: false
			}
		},
		onLoad: function(option) {
			this.init()
		},
		methods: {
			init() {
				httpRequest.request('/employeesapi/user/index', 'POST', {}).then(res => {
					this.bank_name = res.data.bank_name || ""
					this.bank_account = res.data.bank_account || ""
					this.open_bank = res.data.open_bank || ""
					this.pageShow = true
				})
			},
			// 获取银行信息
			confirmadd() {
				let _this = this
				if (this.bank_name == "") {
					httpRequest.toast("请输入持卡人姓名")
					return false
				}
				if (this.bank_account == "") {
					httpRequest.toast("请输入银行卡号")
					return false
				}
				if (this.open_bank == "") {
					httpRequest.toast("请输入开户行")
					return false
				}
				httpRequest.request('/employeesapi/user/editBankInfo', 'GET', {
					bank_name: this.bank_name,
					bank_account: this.bank_account,
					open_bank: this.open_bank
				}).then(res => {
					httpRequest.toast(res.msg)
					if (res.code == 1) {
						setTimeout(() => {
							uni.navigateBack(1)
						}, 500)
					}
				})
			}
		},
	}
</script>

<style scoped lang="scss">
	.userType {
		width: 140rpx;
		height: 81rpx;
		color: #999999;
		font-size: 30rpx;
		text-indent: 1em;
		line-height: 81rpx;
		background-color: #fff;
		border-radius: 20rpx;
		position: relative;
	}

	.backCard {
		width: 100%;
		height: 300rpx;
		background: #FFFFFF;
		border-radius: 20rpx;
		margin-bottom: 30rpx;
	}

	.labmar {
		margin: 20rpx 0;
		display: inline-block;
	}

	.container {
		padding: 0 38rpx;
	}

	.conta {
		padding: 40rpx 40rpx;
		background-color: #fff;
	}

	.padd10 {
		padding: 20rpx;
	}

	.padd20 {
		padding: 0 20rpx 20rpx 20rpx;
	}

	::v-deep .u-input {
		background-color: #fff;
	}

	::v-deep .u-border {
		border-color: #fff !important;
	}

	::v-deep .uni-input-input {
		padding-left: 20rpx;
	}

	::v-deep .u-input--radius {
		border-radius: 20rpx;
	}

	.onFont {
		color: #999999;
		font-size: 30rpx;
		margin-top: 20rpx;
	}

	.width80 {
		width: 60%;
	}
</style>